import React, {useState, useEffect, useRef, useMemo, useImperativeHandle} from 'react';
import { Table, Avatar, Button, Empty, Typography,Dropdown } from '@douyinfe/semi-ui';
import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
import axios from "axios";
import {getstuinfo} from "../../../../api/api.js";
import StudentEform from "./StudentEform.jsx";
const { Text } = Typography;


function StudentTable(props,ref) {
    const [dataSource, setData] = useState();
    const childRef = useRef();
    useEffect(()=>{

        fetchData();

    },[])
    async function fetchData(){
        const res = await getstuinfo()
        console.log(res)
        let tableData = {...res.data.data}
        const colorArray = ["amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink", "purple", "red", "teal", "violet", "yellow"]
        const colorLength = colorArray.length - 1
        let arr = []
        Object.keys(tableData).forEach((key) => {
            tableData[key].avatarBg = colorArray[parseInt(Math.random() * (colorLength + 1),10)]
            tableData[key].key = tableData[key].studentid
            arr.push(tableData[key])
        })
        console.log(arr)
        setData(arr)

    }
    const removeRecord = key => {
        let newDataSource = [...dataSource];
        if (key != null) {
            let idx = newDataSource.findIndex(data => data.key === key);
            console.log(key)

        }
    };
    function ssetdata(adda) {
        setData(adda)
    }

    const rowSelection = {
        getCheckboxProps: record => ({
            disabled: record.name === '设计文档',
            name: record.name,
        }),
        onSelect: (record, selected) => {
            console.log(`select row: ${selected}`, record);
        },
        onSelectAll: (selected, selectedRows) => {
            console.log(`select all rows: ${selected}`, selectedRows);
        },
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };
    const dayin = (value, record) => {
        record.cname.includes(value)
        columns[3].filters = test
    };
    const test = [
        {
            text: '计算机科学与技术',
            value: '计算机科学与技术',
        },
        {
            text: '网络工程',
            value: '网络工程',
        },
    ]
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',

            render: (text, record, index) => {
                return (
                    <div>
                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                            {typeof text === 'string' && text.slice(0, 1)}
                        </Avatar>
                        {text}
                    </div>
                );
            },
        },
        {
            title: '学号',
            dataIndex: 'studentid',

        },
        {
            title: '学院',
            dataIndex: 'cname',

        },
        {
            title: '系',
            dataIndex: 'rname',

        },
        {
            title: '专业',
            dataIndex: 'majeurname',

        },
        {
            title: '班级',
            dataIndex: 'clname',
        },
        {
            title: '手机号',
            dataIndex: 'phone',

        },
        {
            title: '所在寝室楼',
            dataIndex: 'buildName',

        },
        {
            title: '寝室号',
            dataIndex: 'rrid',

        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (text, record) => (
                <StudentEform mess={record}></StudentEform>
            ),
        },
    ];

    const empty = (
        <Empty
            image={<IllustrationNoResult />}
            darkModeImage={<IllustrationNoResultDark />}
            description={'无学生信息'}
        />
    );
    const pagination = useMemo(
        () => ({
            pageSize: 8,
        }),
        []
    );
    useImperativeHandle(ref, () => ({
        fetchData,
        ssetdata
    }));

    return (
        <>

            <Table
                style={{ minHeight: 350 }}
                columns={columns}
                dataSource={dataSource}
                onChange={()=>{console.log(' ')}}
                empty={empty}
                rowSelection={rowSelection}
                pagination={pagination}
            />

        </>
    );
}
StudentTable = React.forwardRef(StudentTable);
export default StudentTable;